<template>
	<view class="ys" v-if="show_form">
		<view class="row">
			<view class="title">
				身份证正反面
			</view>
			<view class="box idcard">
				<view class="imgbox">
					<view class="imgitem" @click="seeImg(userinfo.idCardImage)">
						<image :src="userinfo.idCardImage || '/static/img/sfz.jpg'" mode="aspectFill"></image>
						<text v-if="userinfo.idCardImage == ''">未上传身份证国徽面</text>
					</view>
					<view class="imgitem" @click="seeImg(userinfo.idCardImageReverse)">
						<image :src="userinfo.idCardImageReverse || '/static/img/sfz.jpg'" mode="aspectFill"></image>
						<text v-if="userinfo.idCardImageReverse == ''">未上传身份证人像面</text>
					</view>
				</view>
			</view>
			<view class="title">
				手持身份证图片
			</view>
			<view class="box idcard">
				<view class="imgbox">
					<view class="imgitem" @click="seeImg(userinfo.idCardImageHand)">
						<image :src="userinfo.idCardImageHand || '/static/img/sfz.jpg'" mode="aspectFill"></image>
						<text v-if="userinfo.idCardImageHand == ''">未上传手持身份证图片</text>
					</view>
				</view>
			</view>
			<view class="title">
				头像
			</view>
			<view class="box idcard">
				<view class="imgbox">
					<view class="imgitem" @click="seeImg(userinfo.avatar)">
						<image :src="userinfo.avatar || '/static/img/sfz.jpg'" mode="aspectFill"></image>
						<text v-if="userinfo.avatar == ''">未上传头像</text>
					</view>
				</view>
			</view>
			<view class="title">
				一寸照片
			</view>
			<view class="box idcard">
				<view class="imgbox">
					<view class="imgitem" @click="seeImg(userinfo.faceImage)">
						<image :src="userinfo.faceImage || '/static/img/sfz.jpg'" mode="aspectFill"></image>
						<text v-if="userinfo.faceImage == ''">未上传一寸照片</text>
					</view>
				</view>
			</view>
			<view class="landlordbox" v-if="type == 'landlord'">
				<view class="title">
					房产证照片
				</view>
				<view class="box idcard">
					<view class="imgbox">
						<view class="imgitem" @click="seeImg(houseImages)">
							<image :src="houseImages || '/static/img/sfz.jpg'" mode="aspectFill"></image>
							<text>未传房产证照片</text>
						</view>
					</view>
				</view>
			</view>
			<view class="title">
				基本信息
			</view>
			<view class="box">
				<view class="li" v-if="deptRange != ''">
					<text>部门/所属社区</text>
					<view class="right">
						<uni-data-picker v-model="userinfo.deptId" :preload="true" :border="false" :map="map"
							placeholder="未选择部门id / 所属社区的id" :readonly="true" :clearIcon="false" popup-title="部门/所属社区"
							:ellipsis="true" :localdata="deptRange"></uni-data-picker>
					</view>
				</view>
				<view class="li">
					<text>姓名</text>
					<view class="right">
						{{userinfo.tenantName}}
					</view>
				</view>
				<view class="li">
					<text>昵称</text>
					<view class="right">
						{{userinfo.nickname}}
					</view>
				</view>
				<view class="li">
					<text>性别</text>
					<view class="right">
						<text v-if="userinfo.tenantGender==0">男</text>
						<text v-else-if="userinfo.tenantGender == 1">女</text>
						<text v-else-if="userinfo.tenantGender == 2">未知</text>
					</view>
				</view>
				<view class="li">
					<text>年龄</text>
					<view class="right">
						{{userinfo.tenantAge}}
					</view>
				</view>
				<view class="li" v-if="type != 'landlord'">
					<text>民族</text>
					<view class="right">
						{{userinfo.tenantNation}}
					</view>
				</view>
				<view class="li">
					<text>身份证号</text>
					<view class="right">
						{{userinfo.tenantIdentityNum}}
					</view>
				</view>
				<view class="li">
					<text>手机号</text>
					<view class="right">
						{{userinfo.tenantMobile}}
					</view>
				</view>
			</view>
			<view class="title">
				备注
			</view>
			<view class="box textareabox">
				<view class="li">
					{{userinfo.notes || '未输入备注'}}
				</view>

			</view>
		</view>

		<view class="row">
			<view class="title">
				<text>*</text>租户信息审批
			</view>
			<view class="box">
				<view class="li">
					<text>审批状态</text>
					<view class="right show">
						<uni-data-select :localdata="statusRange" placement="top" v-model="status"></uni-data-select>
					</view>
				</view>
				<view class="li" v-if="status == 2">
					<textarea maxlength="-1" v-model="refusalDesc" placeholder="请输入拒绝原因"></textarea>
				</view>

			</view>
		</view>

		<view class="footer">
			<button @click="sumbit" :loading="loading" :disabled="loading">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		tenantdetail,
		auditPost
	} from "@/api/system.js"
	import {
		deptNodes,
		getTenantIsShow
	} from "@/api/api.js"
	export default {
		data() {
			return {
				type: '',
				loading: false,
				userinfo: {
					avatar: '', //头像
					idCardImage: '', //身份证正面照片
					idCardImageReverse: '', //身份证反面照
					idCardImageHand: '', //手持身份证照
					faceImage: '', //一寸照片
					tenantAge: '', //年龄
					tenantGender: '', //性别
					tenantName: '', //租户姓名
					nickname: '', //昵称
					tenantNation: '', //民族@
					tenantIdentityNum: '', //租户身份证号
					notes: '', //备注
					tenantMobile: '', //联系方式
					tenantId: '',
					deptId: ''
				},
				houseImages: '',
				deptRange: [],
				map: {
					text: 'name',
					value: 'id'
				},
				dept: [],
				parentId: 100,
				refusalDesc: '',
				statusRange: [{
						text: '通过',
						value: 1
					},
					{
						text: '拒绝',
						value: 2
					},
					{
						text: '黑名单',
						value: 3
					}
				],
				status: '',
			}
		},
		onLoad(e) {
			this.getTenantIsShow()
			if (e.id) {
				this.tenantId = e.id
				this.deptList()
			}
		},
		methods: {
			getTenantIsShow() {
				getTenantIsShow().then(res => {
					this.show_form = res.data
				})
			},
			deptList() {
				deptNodes({
					parentId: this.parentId
				}).then(res => {
					if (res.code == 200) {
						this.deptRange = res.data
						this.tenantdetail()
					}
				})
			},
			seeImg(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			tenantdetail() {
				tenantdetail(this.tenantId).then(res => {
					if (res.code == 200) {
						this.userinfo.tenantId = res.data.tenantId
						let data = res.data
						this.userinfo = {
							...this.userinfo,
							...data
						}
						this.userinfo.deptId = Number(this.userinfo.deptId)
					}
				})
			},
			landlordDetail() {
				landlordDetail().then(res => {
					if (res.code == 200) {
						this.userinfo.tenantId = res.data.tenantId
						let data = res.data
						this.userinfo = {
							...this.userinfo,
							...data
						}
						this.houseImages = data.houseImages
					}
				})
			},
			uploadImg(type) {
				let that = this
				uni.chooseImage({
					sourceType: ['album', 'camera'], //从相册选择
					count: 1,
					success: (res) => {
						let igmFile = res.tempFilePaths;
						uni.showLoading({
							mask: true,
							title: '加载中'
						})
						for (let i = 0; i < igmFile.length; i++) {
							uni.uploadFile({
								url: `${that.$config.websiteUrl}common/upload`,
								header: {
									'Authorization': uni.getStorageSync('token')
								},
								filePath: igmFile[i],
								name: 'file',
								success: (res) => {
									uni.hideLoading()
									let imgRes = JSON.parse(res.data); //微信和头条支持
									if (imgRes.code == 200) {
										let imgData = imgRes
										// idCardImage: '', //身份证正面照片
										// idCardImageReverse: '', //身份证反面照
										// idCardImageHand: '', //手持身份证照
										if (type == 'idCardImage') {
											that.idCardImage = imgData.url
										} else if (type == 'idCardImageReverse') {
											that.idCardImageReverse = imgData.url
										} else if (type == 'idCardImageHand') {
											that.idCardImageHand = imgData.url
										} else if (type == 'avatar') {
											that.avatar = imgData.url
										} else if (type == 'faceImage') {
											that.faceImage = imgData.url
										} else if (type == 'house_images') {
											that.houseImages = imgData.url
										}
									} else {
										return uni.$showMsg(res.msg)
									}
								},
								fail(err) {
									uni.hideLoading()
								}
							})
						}
					},
				});
			},
			changeSex(e) {
				this.userinfo.tenantGender = e.detail.value
			},
			sumbit() {
				this.loading = true
				var that = this
				if (that.type == 'landlord') {
					let data = {
						houseImages: that.houseImages,
					}
					insetLandlord({
						...that.userinfo,
						...data
					}).then(res => {
						uni.$showMsg(res.msg)
						that.loading = false
						if (res.code == 200) {
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					})
				} else {
					auditPost({
						refusalDesc: that.refusalDesc,
						status: that.status,
						tenantId: that.tenantId
					}).then(res => {
						uni.$showMsg(res.msg)
						that.loading = false
						if (res.code == 200) {
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.ys {
		background: #F1F4F3;
		height: 100%;
		min-height: 100vh;
		/* #ifdef H5 */
		min-height: calc(100vh - 44px);
		/* #endif */
		box-sizing: border-box;
		padding-top: 10px;
		padding-bottom: 80px;
	}

	radio {
		transform: scale(.7);
	}

	.imgitem {
		position: relative;
		width: 49%;

		image {
			width: 100%;
		}

		text {
			position: absolute;
			top: 75%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 12px;
			color: #777;
			display: block;
			text-align: center;
			width: 100%;
		}
	}


	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		padding: 5px 10px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;

		button {
			background: #000;
			color: #1FFD91;
			border-radius: 20px;
			width: 96%;
			margin: 0 auto;
			font-weight: bold;
		}
	}

	.row {
		padding: 0 10px;

		.title {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #777;
			margin-top: 10px;

			text {
				color: #f00;
			}
		}

		.box {
			background: #fff;
			padding: 5px 10px;
			box-sizing: border-box;
			margin-top: 10px;
			border-radius: 12px;

			&.textareabox {
				font-size: 14px;
			}

			textarea {
				font-size: 14px;
				width: 100%;
				box-sizing: border-box;
				height: 100px;
			}

			&.deptbox {
				.li {
					align-items: center;
					padding: 0;
				}
			}

			.li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 12px 0;
				border-bottom: 1px solid #eee;

				.right {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					width: 62%;
					font-size: 15px;
					color: #777;
					overflow: hidden;

					input {
						text-align: right;
						font-size: 14px;
						width: 100%;
					}

					&.show {
						overflow: unset;
					}

					.time {
						background: #f2f2f2;
						width: 80px;
						display: block;
						font-size: 12px;
						height: 25px;
						line-height: 25px;
						margin: 0 4px;
						text-align: center;
						color: #777;
					}
				}

				&:last-child {
					border-bottom: 0;
				}
			}

			.noli {
				border-bottom: 0;
				padding-top: 5px;
			}
		}

		.idcard {

			.imgbox {
				display: flex;
				justify-content: space-between;
				justify-content: space-between;
			}

			image {
				width: 100%;
				height: 100px;
			}
		}
	}
</style>